<template>
	<view>
		<text class="safetext">
			安全管理
		</text>
		<view style="height: 150upx;background-color: #FFFFFF;">
			<u-radio-group v-model="radiovalue1" placement="column" @change="groupChange">
				<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in radiolist1" :key="index"
					:label="item.name" :name="item.name">{{item.name}}
				</u-radio>
			</u-radio-group>

		</view>
		<view v-if="setPassword">
			<view class="">
				<text class="safetext">设置支付密码</text>
			</view>
			<u-form class="forms">
				<u-form-item label="设置密码">
					<div v-if="newPassword" class="password" @click="popup('newPassword')">
						<span class="text"></span>
						<span class="text"></span>
						<span class="text"></span>
						<span class="text"></span>
						<span class="text"></span>
						<span class="text"></span>
					</div>
					<div v-else class="no-data" @click="popup('newPassword')">请输入6位数字</div>
				</u-form-item>
				<u-form-item label="确认密码">
					<div v-if="confirmPassword" class="password" @click="popup('confirmPassword')">
						<span class="text"></span>
						<span class="text"></span>
						<span class="text"></span>
						<span class="text"></span>
						<span class="text"></span>
						<span class="text"></span>
					</div>
					<div v-else class="no-data" @click="popup('confirmPassword')">请再次输入密码确认一致</div>
				</u-form-item>
				<view class="submit" v-if="!userInfo.paymentPassword" @click="editPassword">确定密码</view>
				<view class="submit" v-if="userInfo.paymentPassword" @click="editPassword">修改密码</view>
			</u-form>
		</view>
		<view v-if="radiovalue1 == '使用密码支付' && setPassword==false" class="">
			<view class="">
				<u-cell-item v-if="userInfo.paymentPassword" title="修改支付密码"
					@click="navigateTo('/pages/mine/set/securityCenter/modifyPassword?type=edit','isauth')">
				</u-cell-item>
				<!-- <u-cell-item v-if="userInfo.paymentPassword" title="修改支付密码"
          @click="navigateTo('/pages/passport/login')"></u-cell-item> -->
			</view>
			<view class="">
				<u-cell-item v-if="userInfo.paymentPassword" title="忘记支付密码"
					@click="navigateTo('/pages/mine/set/securityCenter/modifyPassword?type=forget','isauth')">
				</u-cell-item>
			</view>
		</view>
		<pay-password title="请设置支付密码" @passwordFinish="passwordFinish" type="password" ref="payPassword">
		</pay-password>
	</view>
</template>

<script>
	import storage from "@/utils/storage.js"
	import payPassword from "@/components/pay-password/pay-password.vue"
	import {
		PaymentPassword,
		PostmentPassword,
		getPassword,
		getUserInfo
	} from "@/api/members.js"
	export default {
		components: {
			payPassword
		},
		data() {
			return {
				newPassword: "", //新密码
				confirmPassword: "", // 确认密码
				userInfo: {},
				radiolist1: [{
					name: '免密支付',
					disabled: false
				}, {
					name: '使用密码支付',
					disabled: false
				}],
				radiovalue1: '',
				setPassword: false
			};
		},
		onLoad(option) {
			if (option.type) {
				this.type = option.type
			}
		},
		onShow() {
			this.userInfo = storage.getUserInfo()
			this.getPswd()
		},
		methods: {
			getPswd() {
				getPassword().then((res) => {
					if (res.data.success) {
						if (res.data.result.noSecret) {
							this.radiovalue1 = '免密支付'
						} else if (!res.data.result.noSecret && res.data.result.setPwd) {
							this.radiovalue1 = '使用密码支付'
						} else {
							this.radiovalue1 = ''
						}
					} else {
						uni.showToast({
							title: res.data.message,
							duration: 2000,
							icon: "none",
						});
					}
				});
			},
			navigateTo(url, type) {
				if (type === 'auth') {
					this.userInfo = storage.getUserInfo()
					if (this.userInfo.idCardNumber && this.userInfo.realName) {
						uni.showToast({
							title: '已认证',
							icon: 'none'
						})
						return
					}
				}
				if (type === 'isauth') {
					this.userInfo = storage.getUserInfo()
					// if (!this.userInfo.idCardNumber || !this.userInfo.realName) {
					// 	uni.showToast({
					// 		title: '请先进行实名认证',
					// 		icon: 'none'
					// 	})
					// 	return
					// }
				}
				uni.navigateTo({
					url: url,
				});
			},
			groupChange(n) {
				if (n == "免密支付") {
					PostmentPassword({
						noSecret: 1,
					}).then((res) => {
						if (res.data.success) {
							this.setPassword = false
							uni.showToast({
								title: '设置成功!',
								duration: 2000,
								icon: "none"
							});
							this.initUserInfo()
						}
					});
				} else if (n == "使用密码支付") {
					getPassword().then((res) => {
						if (res.data.success) {
							if (res.data.result.setPwd === true && this.userInfo.paymentPassword !== null) {
								this.setPassword = false
								PostmentPassword({
									noSecret: 0,
								}).then((res) => {
									if (res.data.success) {
										uni.showToast({
											title: '设置成功!',
											duration: 2000,
											icon: "none"
										});
										this.initUserInfo()
									}
								});
							} else if (res.data.result.setPwd === false) {
								uni.showToast({
									title: '请设置支付密码',
									duration: 2000,
									icon: "none"
								});
								this.setPassword = true
							}
						}
					});
				}
			},
			initUserInfo() {
				//获取用户信息
				getUserInfo().then((user) => {
					if (user.data.code === 200) {
						this.userInfo = user.data.result
						storage.setUserInfo(user.data.result);
					} else {
						this.userInfo = {}
						storage.removeUserInfo()
						storage.setHasLogin(false)
					}
				});
			},
			popup(type) {
				this.active = type
				if (this.active === 'newPassword') {
					this.newPassword = ''
				}
				if (this.active === 'confirmPassword') {
					this.confirmPassword = ''
				}
				if (this.active === 'password') {
					this.password = ''
				}
				this.$refs.payPassword.show = true
			},
			passwordFinish(word) {
				if (this.active === 'newPassword') {
					this.newPassword = word
				}
				if (this.active === 'confirmPassword') {
					this.confirmPassword = word
				}
				if (this.active === 'password') {
					this.password = word
				}
			},
			editPassword() {
				if (this.type == 'edit') {
					if (this.valitOld() == false) return false;
				}
				if (this.valitNew() == false) return false;
				PostmentPassword({
					newPassword: this.newPassword,
					confirmPassword: this.confirmPassword
				}).then((res) => {
					if (res.data.success) {
						storage.setUserInfo(res.data.result)
						uni.showToast({
							title: "密码设置成功!",
							duration: 2000,
							icon: "none",
						});
						this.setPassword = false
						this.radiovalue1 = '使用密码支付'
						this.userInfo.paymentPassword = res.data.result.paymentPassword
						this.initUserInfo()
					} else {
						uni.showToast({
							title: res.data.message,
							duration: 2000,
							icon: "none",
						});
						this.setPassword = true
					}
				})
			},
			valitOld() {
				if (this.password.length == 0) {
					uni.showToast({
						title: "请输入旧密码",
						icon: "none"
					})
					return false
				}
				return true
			},
			valitNew() {
				if (this.newPassword.length == 0) {
					uni.showToast({
						title: "请输入新密码",
						icon: "none"
					})
					return false
				}
				if (this.confirmPassword.length == 0) {
					uni.showToast({
						title: "请确认新密码",
						icon: "none"
					})
					return false
				}
				if (this.newPassword !== this.confirmPassword) {
					uni.showToast({
						title: "两次输入的密码不一致",
						icon: "none"
					})
					return false
				}
				return true
			},
		}
	};
</script>
<style>
	.safetext {
		display: flex;
		height: 100upx;
		line-height: 100upx;
		padding-left: 56upx;
		height: 120upx;
		font-size: 44upx;
	}

	.password {
		padding: 0 70upx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-left: 40rpx;
	}

	.text {
		margin: 4upx;
		width: 16upx;
		height: 16upx;
		background-color: #222222;
		border-radius: 16upx;
	}

	.forms {
		float: left;
		padding-left: 40upx;
	}

	.no-data {
		padding: 0 60upx;
		color: #999999;
	}

	.u-form-item--left__content__label {
		width: 200upx;
	}

	.forms {
		padding: 0px;
	}

	.u-radio {
		padding-left: 82upx;
		padding-top: 40upx;
	}

	/deep/.u-radio__label {
		margin-left: 20rpx !important;
	}

	.u-form-item--left__content__label {
		margin-left: 60rpx;
	}

	.no-data {
		padding: 0 100rpx;
	}

	/deep/.submit {

		height: 80rpx;
		line-height: 80rpx;
		color: #fff;
		text-align: center;
		font-size: 30rpx;
		border-radius: 100px;
		margin-top: 32rpx;
		background: #ff6b35;
		position: fixed;
		bottom: 30rpx;
		left: 104rpx;
		width: 544rpx;
	}

	.forms {
		width: 100%;
	}

	.u-form-item {
		width: auto !important;
		background: #FFFFFF;
	}
</style>
